●筆記關於值的相對單位

DAY 28

只是路過 HTML5 系列第 28 篇

網頁設計 css

iamya

2012-11-05 13:12:05

14381 瀏覽

分享至

現在來介紹一些CSS中的單位

絕對大小：mm, cm, in, pt, pc
相對大小：em, ex
相對於設備(顯示器解析度)：px

常用的是px、em、%
各單位解釋如下:

px: pixels 像素 在螢幕上顯示的單位。

若把網站影像放大放大再放大，
會發現連續色調其實是由許多色彩相近的小方點所組成，像是馬賽克一般，
這些小方點就是構成影像的最小單位“像素”。
像素可以用一個數表示，
例如“1024*768顯示器”，=橫向1024像素和縱向768像素，因此其總數為1024 × 768 = 786432像素。

像素值就能夠在螢幕上進行了精確的定位
如果要強迫使用者看到的字型大小跟設計者的畫面一樣，就一定要用 px 為單位。
最能達到一致性!

但是如果有位老花眼的使用者，想看字比較大的網站內容(無障礙網站)，
px一開始就在網頁樣式宣告裡訂定大小，無法修改字體。
此時，
我們可以使用em，可以彈性的在瀏覽器裡自由調整字級大小，
透過「瀏覽器的字級調整功能-字級:大、中、小等」來放大縮小文字。

em原本是印刷上用來衡量字體大小的單位，
em並不是任何專有名詞的縮寫，而單純只是指一個大寫字母「M」所佔有的寬度。
什麼是大寫字母「M」呢？
因為在所有字母裡，M是最接近全尺寸滿格的一個，所以把它拿來當作衡量字體大小的單位。

HTML 中預設的文字大小是 16 像素，在 CSS 語法中 1 em 指的是文字大小以一個大寫的 M 字為標準的大小，和HTML 中預設的文字大小是 16 像素是相同的。

所以一般都以16點作為1 em。

em有兩個特點:
(1) em的值並不是固定的
(2) em會繼承父級元素的字體大小

CSS 在設計頁面的時後, 並不是說 px 就一定不要用, 只是要注意說, 畫面放大的時後, px 指定的是不會跟著一起放大,
筆記建議如下:

文字: 使用 em 或 %.
間距: 兩個 Module 的間距這種, 用 px (不然畫面放大, 間距也跟著放大, 也蠻難看的.

Yahoo! 的 YUI Fonts CSS 是建議, 字的大小都用 % 來表示, 所以他也有提供對照表:

10px => 77%
11px => 85%
12px => 93% (was 93)
13px => 100%
14px => 108% (was 107)
15px => 116% (was 114)
16px => 123.1% (was 122)
17px => 131% (was 129)
18px => 138.5% (was 136)
19px => 146.5% (was 144)
20px => 153.9% (was 152)
21px => 161.6% (was 159)
22px => 167%
23px => 174%
24px => 182%
25px => 189%
26px => 197%

照 YUI 的說法是, 平常在寫自訂區塊、頁寬等, 先用 px 數確定好, 再照下面的公式去算 em 值:

px / 13 = em (non IE)
px / 13 * 0.9759 = IE

其它要再注意的是:

最好要設 min-width
其它都用 % 算

例如:
使用em作為字級單位時，通常會先宣告body的字級大小，譬如說我慣用12px大小的字級，就先宣告body如下：

body { font-size:75% } /* 16px*75%=12px */

這段意思是指對整體的CSS文字做em對於px的轉換。
瀏覽器預設的大小是16px。
網頁上的1em就不再是預設的16px，而是12px。
1em=12px
body宣告完後，就可以開始以em為單位來制定字級：

body { font-size:75% } /* 16px*75%=12px */
h1 {font-size:2em} /* 2*12px=24px */
p{font-size:1.25em} /* 1.25*12px=15px */
li, span{font-size:1.25em} /* 1.25*12px=15px */

不過，相較於px，em的使用彈性雖大，但，卻依然存在需要進一步解決的問題。

em的問題是：字級大小會隨著巢狀層級而疊加。

譬如說：li的字級是15px，但li裡的li則會因為1.25*15px而疊加到18.75px，若再有一層li li li則會進一步1.25*18.75疊加上去……。

em的疊加問題，其解決之道雖然只要再加一行宣告，讓巢狀結構下的所有次層級都歸零即可。

li li, li p, li span, li p span, p span{font-size:1em} /* 歸零 */

不過，如果巢狀結構複雜，歸零作業也會變得相對麻煩。

rem:是CSS3新推出來解決em疊加問題的字級單位。

rem的字義是「root em」，簡單地說，就是先宣告一個所有網頁元件都共用的em單位：

html { font-size:75% } /* 16px*75%=12px */

接著，所有字級都依此標準來設計制定：

body { font-size:1rem } /* 1*12px=12px */
h1 {font-size:2rem} /* 2*12px=24px */
p{font-size:1.25rem} /* 1.25*12px=15px */
li, span{font-size:1.25rem} /* 1.25*12px=15px */

由於所有網頁元件都共用同一個em單位，所以也不會產生em的疊加問題。

其他單位:
ex: font-size的x-height值，為小寫字母x的高度，通常相當於font-size的一半。

pt
絕對長度單位。點（Point）。列印的點數大小。 1 pt = 1/72 吋,
1in = 2.54cm = 25.4 mm = 72pt = 6pc
要讓字型大小隨著使用者調整的螢幕大小比例來變動，則是用 pt 為單位。
假設 Windows 系統標準預設字型 9pt 來看，當使用者將系統預設字型大小調大的時候，網頁的字型大小也會跟著變。
1024*768 大字型(120dpi)，選單 CSS 設為 9pt
pc: picas, 1 pc = 12 pt
如果沒有註明單位，那預設的單位是 px

pc
絕對長度單位。派卡（Pica）。相當於我國新四號鉛字的尺寸。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

in
絕對長度單位。英寸（Inch）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

mm
絕對長度單位。公釐、毫米（Millimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
cm
絕對長度單位。公分、厘米（Centimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

額外補充:
行間距
行間距取決於字體的大小，一般來說，小的字號需要大一點的行間距來便於閱讀，
中文字體在網頁上如果沒有行間距的設定，對於閱讀大段文字來說是讀者的災難，
所以適當設定line-height是非常必要的。一般地， line-height 在網頁設計中應該是字體大小的1.5倍到2倍。
Word 和其它的文本編輯軟件裡，一般設定字體的120%作為缺省的行間距。
css裡的line- height 設定，
是均分後加在每一行的上下，也就是說，如果line-height 設定為20px 的話，那麼每一行文字的上下各有10px的間距。

在寫 CSS 時, 都建議掛進 css reset, 然後再來寫自己要的 Style.

●如果元素自身沒有設置字體大小，那麼元素自身上的所有屬性值如“boder、width、height、padding、margin、line-height”等
em的公式:
1 ÷ 父元素的font-size × 需要轉換的像素值= em值
●如果元素設置了字體大小，那麼元素自身上的所有屬性值如“boder、width、height、padding、margin、line-height”等
em的公式:
1 ÷ 元素自身的font-size × 需要轉換的像素值= em值

資料來源:

網頁設計該用哪種字級單位：px、em或rem？
http://jas9.blogspot.com/2011/09/pxemrem.html
CSS中強大的EM
http://www.w3cplus.com/css/px-to-em
CSS 使用 px 和 em 的差異
http://blog.longwin.com.tw/2007/12/css_px_em_difference_2007/
在CSS樣式表中，經常看到pt， px，em，ex，in等長度單位，各是什麼意思，有什麼區別？
http://wenda.tianya.cn/question/4d074ccf653b7242
css中的度量單位 px em ex pt pc in mm cm
http://www.cssk8.com/html/css_Tutorial/201102/28-2607.html
YUI: CSS Grid Builder
http://developer.yahoo.com/yui/grids/builder/
EmChart - em vs px 轉換圖表
http://fordinteractive.com/tools/emchart/